<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

	<link rel="stylesheet" href="style/weuix.min.css"/> 
	<script src="js/zepto.min.js"></script>
	<script src="js/picker.js"></script>
	<script src="js/select.js"></script>
	<style>
	.weui_cell_bd p{position: relative;}
	.weui_cell_bd p input{
			margin-right: 6px;
			width: 20px;
			height: 20px;
			position: absolute;
			top: -6px;
			background: #fff;
	 
			  
		}
		.weui_cell_bd p span{
			position: absolute;
			top: -9px;
			left: 26px;
			display: inline-block;
		}
		.person  .weui_cell_ft{
			font-size: 12px;
			
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: right;
			width: 70%;
			padding:6px 0;	


		}
		.fanhui{
			padding: 12px 12px;
			background: #fff;
		}
		.weui_cells{margin-top: 0;}
	</style>
 
</head>
<body>

<div class="weui_btn_primary weui-header "> 
			<div class="weui-header-left"> <a class="icon icon-109 f-white" href="javascript:;"  onclick="javascript:history.go(-1);" ></a>  </div>
			<h1 class="weui-header-title">选择人员</h1>
			<div class="weui-header-right"><a class=" f-white"  href="javascript:;" >完成</a></div> 
		</div>

<div class="tab">
	<ul>
		<li class="focus tli">
			<a href="javascript:;">常用联系人</a>

		</li>
		<li class="tli">
			<a href="javascript:;">所有联系人</a>

		</li>
	</ul>

	<div class="weui_search_bar">
<input type="search" class="search-input" id='search' placeholder='查询' style="box-sizing:content-box"/><button  class="weui_btn weui_btn_mini weui_btn_primary" style="height:32px; line-height:32px;"><i class="icon icon-4"></i></button>    
</div>


	<div class="tabcont">
		<div class="cont">
				<!-- 常用联络人开始 -->
				 <div class="weui_cells person ">	 

				 <div class="weui_cell">
				 	<div class="weui_cell_hd"></div>
				 	<div class="weui_cell_bd weui_cell_primary"><p><input name="people" type="checkbox" value=""  data-peopleid="100"  /><span>钟晓洋</span></p></div>
				 	 <div class="weui_cell_ft">董事长、 长董事长、财务部长董事长、 长董事长、财务部长</div>
				 	  
				 </div>
				 <div class="weui_cell">
				 	<div class="weui_cell_hd"></div>
				 	<div class="weui_cell_bd weui_cell_primary"><p><input name="people" type="checkbox" value=""  data-peopleid="101" /><span>张苗</span></p></div>
				 	 <div class="weui_cell_ft">职员</div>
				 </div>
				 <div class="weui_cell">
				 	<div class="weui_cell_hd"></div>
				 	<div class="weui_cell_bd weui_cell_primary"><p><input name="people" type="checkbox" value=""  data-peopleid="102" /><span>张华</span></p></div>
				 	 <div class="weui_cell_ft">董事长、财务部长</div>
				 </div>

				 <div class="weui_cell">
				 	<div class="weui_cell_hd"></div>
				 	<div class="weui_cell_bd weui_cell_primary"><p><input name="people" type="checkbox" value=""  data-peopleid="103" /><span>李可</span></p></div>
				 	 <div class="weui_cell_ft">财务</div>
				 </div>
			  

			</div>
				<!--常用联络人结束  -->
		</div>
		<div class="cont" style="display: none">
			 <!--所有人员开始  -->
			 <ul class="treemenu">
	<li data-id="1" >
		<div>
			<div class="left">
				<input name="bumen" type="checkbox" value="" class="checkAll" />
				<span>中德生态园管理委员会</span>
			</div>
			<div class="right">
				<span>10</span>
				<i class="icon icon-108"></i>

			</div>
			<div class="clear"></div>
		</div>
		<ul>
			<li data-id="1-1" data-key="true">
				<div>
					<div class="left">
						<input name="bumen" type="checkbox" value="" />
						<span>管委领导</span>
					</div>
					<div class="right">
						<span>10</span>
						<i class="icon icon-108"></i>

					</div>
					<div class="clear"></div>
				</div>
			</li>
			<li data-id="1-2" data-key="true">
				<div>
					<div class="left">
						<input name="bumen" type="checkbox" value="" />
						<span>管委办公室</span>
					</div>
					<div class="right">
						<span>10</span>
						<i class="icon icon-108"></i>

					</div>
					<div class="clear"></div>
				</div>
				 
			</li>

		</ul>
	</li>
	<li data-id="2">
		<div>
			<div class="left">
				<input name="bumen" type="checkbox" value=""  class="checkAll"  />
				<span>西海岸投资促进有限公司</span>
			</div>
			<div class="right">
				<span>10</span>
				<i class="icon icon-108"></i>

			</div>
			<div class="clear"></div>
		</div>
		<ul>
			<li data-id="2-1" data-key="true">
				<div>
					<div class="left">
						<input name="bumen" type="checkbox" value="" />
						<span>投资服务部</span>
					</div>
					<div class="right">
						<span>10</span>
						<i class="icon icon-108"></i>

					</div>
					<div class="clear"></div>
				</div>
			</li>
			<li data-id="2-2" data-key="true">
				<div>
					<div class="left">
						<input name="bumen" type="checkbox" value="" />
						<span>中德信息公司</span>
					</div>
					<div class="right">
						<span>10</span>
						<i class="icon icon-108"></i>

					</div>
					<div class="clear"></div>
				</div>
				 
			</li>

		</ul>
	</li>
	<li  data-id="3">
		<div>
			<div class="left">
				<input name="bumen" type="checkbox" value="" />
				<span>青岛中德联合集团</span>
			</div>
			<div class="right">
				<span>10</span>
				<i class="icon icon-108"></i>

			</div>
			<div class="clear"></div>
		</div>
		 
	</li>



</ul>

			
			 <!--所有人员结束  -->
		</div>
		
	</div>
</div>

<style>
	body{height: 100vh; overflow: hidden;}
	.tab{}
	.tab>ul{list-style: none;background: #fff;overflow: hidden;}
	.tab>ul>li{width: 50%;text-align: center; float: left; list-style: none;overflow: hidden;}
	.tab ul li a{ text-align: center; background: #eee;  margin: 10px 10px;  display: block; padding:4px 0; color: #666; border-radius: 6px;}
	.tab>ul>li.focus a{background: #04BE02; color: #fff}
	.tabcont{
		
		background: #fff;overflow: hidden;
	}
	.cont{margin: 12px;overflow: auto;}
	.weui_search_bar{background: #fff;}

</style>
<script>
	$(".tab>ul>li").click(function(){
		var i=$(this).index();
		$(this).addClass("focus");
		$(this).siblings().removeClass("focus");

		$(".tabcont .cont").eq(i).show()
		$(".tabcont .cont").eq(i).siblings().hide(); 
	})
 	
	$(".cont").css("height",(parseInt($(window).height())-157))

</script>
 





<style>
	.treemenu{}
	.treemenu>li{padding: 10px 15px; list-style: none;border-bottom: 1px solid #ddd;background: #fff; display: block;line-height: initial; }
	.treemenu>li input{width: 20px;height: 20px;}
	.treemenu>li>div{}
	.treemenu>li>div .right span,.treemenu>li>ul>li>div .right span{color: #999;}


	.treemenu>li>ul{display: none;list-style: none;margin-top: 12px;}
	.treemenu>li>ul li{padding: 10px 15px; list-style: none;border-bottom: 1px solid #ddd;background: #fff; display: block;line-height: initial;padding-left:0px; padding-right:0px;margin-left: 25px }
	.treemenu>li>ul li:last-child{border: none;}

</style>
<script>
	 $(".treemenu>li").on("click",function(){
	 		$(this).find("ul").toggle()

	 })
	 $('.treemenu>li>ul li').click(function(e){
   e.stopPropagation();
	})
	  $('.treemenu input').click(function(e){
   e.stopPropagation();
	})

	  $(".checkAll").on("click",function(){

	  		 $(this).parents("li").find("input[name='bumen']").prop("checked",this.checked); 

	  })

	  $(".treemenu li").click(function(){
	  	var id=$(this).data("id")
	  	var key=$(this).data("key")

	 
	  
	  	if(key==true){
	  		$("#popup").addClass(" weui-popup-container-visible");
	  		$(".weui-popup-modal").addClass("weui-popup-modal-visible")
	  	}
	  	else{

	  	}
	  	
	  })

</script>

















 











	<div id="popup" class="weui-popup-container">
  <div class="weui-popup-modal"  style="overflow:hidden">
 <div class=""  style="position: fixed;top:0;width:100%;height:117px;">
  <div class="weui_btn_primary weui-header "> 
			 
			<h1 class="weui-header-title">选择人员</h1>
			<div class="weui-header-right"><a class=" f-white close-popup"  href="javascript:;" >保存</a></div> 
		</div>

		  <div class="weui_search_bar">
<input type="search" class="search-input" id='search' placeholder='查询' style="box-sizing:content-box"/><button  class="weui_btn weui_btn_mini weui_btn_primary" style="height:32px; line-height:32px;"><i class="icon icon-4"></i></button>    
</div>

<div class="return close-popup">
			<div class="fanhui"><p><i class="icon icon-109"></i>返回上一级</p></div>
		</div>


</div>



  <div class="popheight" style="margin-top: 139px; overflow-y: scroll; ">
      


		 
<div class="weui_cells person ">	 

	 <div class="weui_cell">
	 	<div class="weui_cell_hd"></div>
	 	<div class="weui_cell_bd weui_cell_primary"><p><input name="people" type="checkbox" value=""  data-peopleid="100"  /><span>钟晓洋</span></p></div>
	 	 <div class="weui_cell_ft">董事长、 长董事长、财务部长董事长、 长董事长、财务部长</div>
	 	  
	 </div>
	 <div class="weui_cell">
	 	<div class="weui_cell_hd"></div>
	 	<div class="weui_cell_bd weui_cell_primary"><p><input name="people" type="checkbox" value=""  data-peopleid="101" /><span>张苗</span></p></div>
	 	 <div class="weui_cell_ft">职员</div>
	 </div>
	 <div class="weui_cell">
	 	<div class="weui_cell_hd"></div>
	 	<div class="weui_cell_bd weui_cell_primary"><p><input name="people" type="checkbox" value=""  data-peopleid="102" /><span>张华</span></p></div>
	 	 <div class="weui_cell_ft">董事长、财务部长</div>
	 </div>

	 <div class="weui_cell">
	 	<div class="weui_cell_hd"></div>
	 	<div class="weui_cell_bd weui_cell_primary"><p><input name="people" type="checkbox" value=""  data-peopleid="103" /><span>李可</span></p></div>
	 	 <div class="weui_cell_ft">财务</div>
	 </div>
  

</div>
 
            
    </div>
 
  </div>
 </div> 



	
  <script>
  $(function(){
  		var pop= parseInt($(window).height())-139; 
		$(".popheight").css("height",pop);

		var selectpeople=[];

		$("input[name='people']").click(function(){
			var peopleid=$(this).data("peopleid");
			//alert(peopleid)
			



			var i=$(this).prop("checked")

			if(i==true){
				selectpeople.push(peopleid);
				 alert(selectpeople)

			}
			else{
					$.each(selectpeople,function(index,item){ 
					            if(item==peopleid){selectpeople.splice(index,1);}

   					  });
					alert(selectpeople)

			}
			 

		})




  })



 </script>
</body>
</html>